<template>
  <l-layout class="l-tab-page erpCase" v-show="!lr_loadPage">
    <l-panel :title="$t('淘汰供应商')" v-if="!OtherFormVisible">
      <template #toolLeft>
        <l-query2
          :items="queryItems"
          :formData="queryData"
          :loading="tableLoading"
          @search="handleSearch"
        >
          <template #f_Name>
            <el-input v-model="queryData.f_Name" :placeholder="$t('please enter')" />
          </template>
          <template #f_Type>
            <l-select :options="f_TypeOptions" v-model="queryData.f_Type" />
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <l-tool-btns
          :hasTableSetting="true"
          @setting="lr_handleSettingTable"
          :hasAdd="false"
        >
          <l-excel-btns></l-excel-btns>
        </l-tool-btns>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableData"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <template v-slot:f_TypeList="scope">
          <div class="form_information form_wrap">
            <div v-for="(item, index) in scope.row.f_TypeList" :key="index">
              <el-tag size="mini" class="margin_5" :type="tagType[item]">{{
                item
              }}</el-tag>
            </div>
          </div>
        </template>
        <l-table-btns
          :btns="tableBtns"
          :btnNum="4"
          @click="lr_handleTableBtnClick"
        ></l-table-btns>
      </l-table>
    </l-panel>

    <transition name="el-zoom-in-center">
      <l-panel v-if="OtherFormVisible">
        <template #title>
          <el-page-header
            @back="
              {
                OtherFormVisible = false;
              }
            "
            :content="$t(show_name)"
          />
        </template>
        <!-- Details查看 -->
        <look-form
          ref="lookForm"
          :isReadOnly="formDetails"
          :id="formEditRow.f_Id"
          type="0"
        ></look-form>
      </l-panel>
    </transition>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="465"
      :width="487"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form
        v-if="formTitle != '恢复'"
        ref="form"
        :isReadOnly="formDetails"
      ></my-form>
      <!-- 淘汰恢复弹窗 -->
      <recovery-form
        v-else
        ref="form"
        :isReadOnly="formDetails"
      ></recovery-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "../supplier/form";
import recoveryForm from "./recoveryForm";
import LookForm from "../formalSupplier/lookForm";
const api = window.$api.erpcase.supplier;

export default {
  components: {
    MyForm,
    recoveryForm,
    LookForm,
  },
  data() {
    return {
      OtherFormVisible: false,
      show_name: "",

      lr_isPage: true,
      moduleCode: "ERP_OutSuppliers",

      tagType: {
        成品: "danger",
        半成品: "success",
        其他: "info",
        原料: "",
      },

      // query参数
      queryData: {
        f_Name: "",
        f_Type: "",
      },

      queryItems: [
        { label: "供应商名称", prop: "f_Name" },
        { label: "供应商类型", prop: "f_Type" },
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "供应商编号",
          prop: "f_Number",
          align: "left",
          width: 160,
          isNotAutoWrap: true,
        },
        {
          label: "供应商名称",
          prop: "f_Name",
          align: "left",
          dataType: "input",
          minWidth: 160,
          isNotAutoWrap: true,
        },
        {
          label: "供应商负责人",
          prop: "f_Person",
          align: "left",
          width: 100,
        },
        {
          label: "手机号",
          prop: "f_Phone",
          align: "left",
          dataType: "input",
          width: 120,
        },
        {
          label: "经营范围",
          prop: "f_Scope",
          align: "left",
          dataType: "input",
        },
        {
          label: "供应商类型",
          prop: "f_TypeList",
          align: "left",
          minWidth: 220,
        },
      ],
      tableBtns: [
        { prop: "Edit", label: "Edit" },
        { prop: "Details", label: "Details查看" ,width: 60},
        { prop: "Recovery", label: "恢复" },
        { prop: "Delete", label: "Delete" },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
      formDetails: false,
    };
  },
  computed: {
    f_TypeOptions() {
      return [
        { label: "全部", value: "" },
        { value: "原料", label: "原料" },
        { value: "半成品", label: "半成品" },
        { label: "成品", value: "成品" },
        { label: "其他", value: "其他" },
      ];
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();

      this.lr_loadDataItem("供应商类型");
    },

    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_Id";
      queryData.f_State = 2;
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        for (let i in this.tableData) {
          this.tableData[i].f_TypeList = this.tableData[i].f_Type.split(",");
        }
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleEdit($index, row) {
      this.formEdit = true;
      this.formDetails = false;
      this.formEditRow = row;
      this.handleShowForm("Edit");
    },
    handleDetails($index, row) {
      this.OtherFormVisible = true;
      this.show_name = `Details查看`;
      this.formEditRow = row;
      this.formDetails = true;
    },
    handleRecovery($index, row) {
      this.formEdit = true;
      this.formDetails = false;
      this.formEditRow = row;
      this.handleShowForm("恢复");
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("This operation will permanently delete the data. Do you want to continue?"),
        this.$t("Tips"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("Delete  success"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("Delete has been canceled!"),
          });
        });
    },

    async handleSave(showLoading, hideLoading) {
      showLoading("saving data...");
      if ((await this.$refs.form.validateForm()) && this.formTitle != "恢复") {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit ? "更新成功!" : "Add成功!";
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      } else if (
        (await this.$refs.form.validateForm()) &&
        this.formTitle == "恢复"
      ) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit ? "更新成功!" : "Add成功!";
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("Loading data...");
        await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id });
        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
  },
};
</script>
